<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加菜单</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">一级菜单</li>
        <li>二级菜单</li>
        <li>三级菜单</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">

            <div class="layui-form layuimini-form" lay-filter="addFirstFilter">
                <div class="layui-form-item">
                    <label class="layui-form-label required">菜单名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" lay-verify="required" lay-reqtext="菜单名称不能为空" placeholder="请输入菜单名称" value="" class="layui-input">
                    </div>
                </div>


                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn1">确认保存</button>
                    </div>
                </div>
            </div>


        </div>

        <!--二级菜单添加-->
        <div class="layui-tab-item">

            <div class="layui-form layuimini-form" lay-filter="addSecondFilter">

                <div class="layui-form-item">
                    <label class="layui-form-label required">一级菜单</label>
                    <div class="layui-input-block">
                        <select name="firstModule" class="firstModule" lay-verify="" lay-filter="firstModuleFilter">


                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label required">菜单名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" lay-verify="required" lay-reqtext="菜单名称不能为空" placeholder="请输入菜单名称" value="" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn2">确认保存</button>
                    </div>
                </div>
            </div>
        </div>

        <!--三级菜单添加-->
        <div class="layui-tab-item">

            <div class="layui-form layuimini-form" lay-filter="addThirdFilter" >

                <div class="layui-form-item">
                    <label class="layui-form-label required">一级菜单</label>
                    <div class="layui-input-block">
                        <select name="firstModule" class="firstModule" lay-verify="" lay-filter="firstModuleFilter">


                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label required">二级菜单</label>
                    <div class="layui-input-block">
                        <select name="secondModule" class="secondModule" lay-verify="">


                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label required">菜单名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" lay-verify="required" lay-reqtext="菜单名称不能为空" placeholder="请输入菜单名称" value="" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label required">菜单路径</label>
                    <div class="layui-input-block">
                        <input type="text" name="href" lay-verify="required" lay-reqtext="菜单路径不能为空" placeholder="请输入菜单路径" value="" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn3">确认保存</button>
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>

<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form','element'], function () {
        var form = layui.form,
            layer = layui.layer,
            element = layui.element,
            $ = layui.$;

        //初始化一级菜单的下拉选择框
        $.get("/wfx_manager/module/queryFirstModuleList",function (res) {
            if (res.flag){
                var data = res.data;
                //清空下拉框
                $(".firstModule").empty();
                $.each(data,function (index,item) {
                    var opt = new Option(item.title,item.moduleId,false);
                    $(".firstModule").append(opt);
                });
                //重载下拉选择框
                form.render('select');
            }
        });

        //监听一级菜单下拉选择框，并初始化二级菜单
        form.on('select(firstModuleFilter)', function(data){
            console.log("一级菜单选择了~~~~~"+data.value);
            //根据一级菜单获取二级菜单
            var firstModuleId = data.value;
            $.get("/wfx_manager/module/queryChildModuleListByParentModule",{
                parentModule:firstModuleId
            },function (res) {
                if (res.flag){
                    var data = res.data;
                    //清空下拉框
                    $(".secondModule").empty();
                    $.each(data,function (index,item) {
                        var opt = new Option(item.title,item.moduleId,false);
                        $(".secondModule").append(opt);
                    });
                    //重载下拉选择框
                    form.render('select');
                }
            });
        });

        //监听一级菜单添加
        form.on('submit(saveBtn1)', function (data) {

            $.post("/wfx_manager/module/addThirdModule",
                form.val("addFirstFilter")
            ,function (res) {
                console.log(res);
                if (res.flag){
                    layer.msg(res.msg,function () {
                        //获取iframe的唯一标识
                        var iframeIndex = parent.layer.getFrameIndex(window.name);
                        //关闭iframe窗口
                        parent.layer.close(iframeIndex);
                    })
                }else {
                    layer.msg(res.msg);
                }

            })

            return false;
        });

        //监听二级菜单添加
        form.on('submit(saveBtn2)', function (data) {

            var data = data.field;

            $.post("/wfx_manager/module/addThirdModule",
                form.val("addSecondFilter")
                ,function (res) {
                    if (res.flag){
                        layer.msg(res.msg,function () {
                            //获取iframe的唯一标识
                            var iframeIndex = parent.layer.getFrameIndex(window.name);
                            //关闭iframe窗口
                            parent.layer.close(iframeIndex);
                        })
                    }else {
                        layer.msg(res.msg);
                    }

                });

            return false;
        });

        //监听三级菜单添加
        form.on('submit(saveBtn3)', function (data) {
            var data = data.field;

            $.post("/wfx_manager/module/addThirdModule",
                form.val("addThirdFilter")
                ,function (res) {
                    console.log(res);
                    if (res.flag){
                        layer.msg(res.msg,function () {
                            //获取iframe的唯一标识
                            var iframeIndex = parent.layer.getFrameIndex(window.name);
                            //关闭iframe窗口
                            parent.layer.close(iframeIndex);
                        })
                    }else {
                        layer.msg(res.msg);
                    }

                });

            return false;
        });

    });
</script>
</body>
</html>